<template>
  <view class="page-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <!-- 返回按钮 -->
      <view class="nav-buttons">
        <view class="back-button" @click="goBack">
          <uni-icons type="left" size="20" color="#333333"></uni-icons>
        </view>
        <view class="home-button" @click="goHome">
          <uni-icons type="home" size="20" color="#333333"></uni-icons>
        </view>
      </view>
      <text class="page-title">健康资讯</text>
    </view>

    <!-- 资讯列表 -->
    <scroll-view 
      class="content" 
      scroll-y
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore">
      <view class="news-list">
        <NewsCard
          v-for="(item, index) in newsList"
          :key="index"
          :news="item"
          @click="handleNewsClick"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import NewsCard from './components/NewsCard.vue';
import { apiBaseUrl, minioBaseUrl } from '../../config/api'

// 添加uni API的类型声明
declare const uni: {
  navigateBack(): void;
  switchTab(options: { url: string }): void;
  navigateTo(options: { url: string }): void;
  showLoading(options: { title: string }): void;
  hideLoading(): void;
  showToast(options: { title: string; icon?: string }): void;
  request(options: any): Promise<any>;
};

interface HealthGuide {
  id: number;
  title: string;
  description: string;
  image: string | null;
  time: string;
  views: string;
}

const newsList = ref<HealthGuide[]>([]);

// 下拉刷新状态
const isRefreshing = ref(false);

// 获取所有健康资讯
const getHealthGuides = async () => {
  try {
    // 只在非刷新状态下显示loading
    if (!isRefreshing.value) {
      uni.showLoading({
        title: '加载中...'
      });
    }
    
    const [err, res] = await uni.request({
      url: `${apiBaseUrl}/health/guides/selectAll`,
      method: 'GET'
    }).then(res => [null, res]).catch(err => [err, null]);

    if (err) {
      throw new Error('网络请求失败');
    }

    const { code, AllHealthGuide } = res.data as { code: number; AllHealthGuide: HealthGuide[] };
    if (code === 200 && AllHealthGuide) {
      newsList.value = AllHealthGuide;
      console.log('获取到的数据:', AllHealthGuide);
    } else {
      uni.showToast({
        title: '获取健康资讯失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('请求错误:', error);
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    });
  } finally {
    uni.hideLoading();
    // 停止下拉刷新
    if (isRefreshing.value) {
      isRefreshing.value = false;
    }
  }
};

// 下拉刷新方法
const onRefresh = async () => {
  isRefreshing.value = true;
  await getHealthGuides();
};

const onRestore = () => {
  console.log('刷新复位');
};

// 页面加载时获取数据
onMounted(() => {
  getHealthGuides();
});

const goBack = () => {
  uni.navigateBack();
};

const goHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};

const handleNewsClick = (news: HealthGuide) => {
  console.log('点击新闻:', news);
  // 跳转到健康资讯详情页，携带文章ID
  uni.navigateTo({
    url: `/pages/index/health-guides/health-guides?id=${news.id}`
  });
};
</script>

<style lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #F5F8FF;
  padding-top: 180rpx;
  display: flex;
  flex-direction: column;
}

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 180rpx;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  z-index: 99;
  padding-top: 88rpx;
}

.nav-buttons {
  position: absolute;
  left: 30rpx;
  display: flex;
  gap: 20rpx;
}

.back-button, .home-button {
  width: 64rpx;
  height: 64rpx;
  background-color: #FFFFFF;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  
  &:active {
    opacity: 0.8;
  }
}

.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
}

.content {
  flex: 1;
  height: calc(100vh - 180rpx);
  background-color: #F5F8FF;
  
  :deep(.uni-scroll-view-refresh) {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  :deep(.uni-scroll-view-refresh__spinner) {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }
}

.news-list {
  padding: 20rpx 32rpx;
  min-height: 100%;
}
</style>
    